<template>
  <div class="detail">
    <Loading v-if="good_list.length == 0 || storeInfo.length == 0"></Loading>
    <van-tabs scrollspy sticky>
      <van-tab title="商品">
        <div class="goods">
          <van-swipe @change="onChange" v-if="storeInfo.slider_image">
            <van-swipe-item
              v-for="(i, index) in storeInfo.slider_image"
              :key="index"
            >
              <van-image :src="i"></van-image>
            </van-swipe-item>

            <template #indicator>
              <div class="custom-indicator">
                {{ current + 1 }}/{{ storeInfo.slider_image.length }}
              </div>
            </template>
          </van-swipe>

          <div class="content">
            <div class="num">
              <span class="pri">￥{{ storeInfo.price }}</span>
              <span class="vippri">￥{{ storeInfo.vip_price }}</span>
              <van-image
                class="vip"
                src=""
              />
              <div class="share">
                <img src="../assets/share.png" @click="share" />
              </div>
            </div>
            <div class="introduce">{{ storeInfo.store_name }}</div>
            <div class="label">
              <span>原价:￥{{ storeInfo.ot_price }}</span>
              <span>库存:{{ storeInfo.stock }}{{ storeInfo.unit_name }}</span>
              <span>销量:{{ storeInfo.fsales }}{{ storeInfo.unit_name }}</span>
            </div>
          </div>
        </div>
      </van-tab>

      <van-tab title="评价">
        <div class="evaluate">
          <div>
            <span>用户评论({{ evaluateNum }})</span>
            <router-link to="/evaluate">
              <span class="right">
                <span class="red">{{ evaluateNum }}%</span>
                <span>好评率</span>
                <van-icon name="arrow" />
              </span>
            </router-link>
          </div>
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="nominal">
          <div class="title">
            <van-icon name="stop" />
            <span>优品推荐</span>
            <van-icon name="stop" />
          </div>

          <van-swipe class="my-swipe">
            <van-swipe-item
              v-for="i in Math.ceil(good_list.length / 6)"
              :key="i"
            >
              <div
                class="gList"
                v-for="l in good_list.slice(6 * (i - 1), 6 * i)"
                :key="l.id"
              >
                <router-link :to="`/detail/${l.id}`">
                  <van-image :src="l.image" />
                  <p>{{ l.store_name }}</p>
                  <span>￥{{ l.price }}</span>
                </router-link>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </van-tab>
      <van-tab title="详情">
        <div class="de">
          <p>产品介绍</p>
        </div>

        <template v-if="storeInfo.description">
          <div v-html="storeInfo.description" class="description"></div>
        </template>
      </van-tab>
    </van-tabs>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon
        :icon="coll ? 'star-o' : 'star'"
        :color="coll ? '' : 'red'"
        @click="collection"
        :text="coll ? '收藏' : '已收藏'"
      />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button
        color="#be99ff"
        type="warning"
        text="加入购物车"
        @click="showPopup"
      />
      <van-goods-action-button
        @click="buy"
        color="#7232dd"
        type="danger"
        text="立即购买"
      />
    </van-goods-action>

    <div class="popupbox">
      <van-popup
        v-model="show"
        round
        position="bottom"
        :style="{ height: '60%' }"
        lazy-render
        closeable
      >
        <van-card
          :title="detail.storeInfo.store_name"
          :thumb="
            currentDetail && currentDetail.image
              ? currentDetail.image
              : detail.storeInfo.image
          "
          v-if="currentDetail != null"
        >
          <template #price>
            <span>￥{{ currentDetail.price }}</span>
            <span>库存:{{ currentDetail.stock }}</span>
          </template>
        </van-card>

        <template v-if="detail != null">
          <div
            class="attr"
            v-for="(attrGroup, index) in detail.productAttr"
            :key="index"
          >
            <div class="attr-title">{{ attrGroup.attr_name }}</div>
            <ul class="attr-list">
              <label v-for="(attr, idx) in attrGroup.attr_values" :key="idx">
                <input
                  type="radio"
                  :value="attr"
                  :name="attrGroup.attr_name"
                  v-model="sku[index]"
                />
                <span>{{ attr }}</span>
              </label>
            </ul>
          </div>
        </template>
        <div class="number">
          <p class="sum">数量</p>
          <van-field name="stepper">
            <template #input>
              <van-stepper v-model="stepper" />
            </template>
          </van-field>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { Toast } from "vant";
import Loading from "@/components/Loading";

export default {
  data() {
    return {
      good_list: [],
      storeInfo: {},
      current: 0,
      evaluateNum: 0,
      show: false,
      stepper: 1,
      detail: null,
      coll: true,
      collList: [], //收藏列表
      sku: [],
      cartList: [] //购物车列表
    };
  },
  components: {
    Loading
  },
  created() {
    this.$axios.get("/api/product/detail/" + this.$route.params.id).then(d => {
      this.good_list = d.data.data.good_list;
      this.storeInfo = d.data.data.storeInfo;
      this.detail = d.data.data;
      console.log(this.storeInfo);
    });

    this.$axios.get("api/collect/user?page=1&limit=20").then(d => {
      this.collList = d.data.data;
      console.log(d.data.data);
    });
  },
  mounted() {
    this.$axios
      .get("/api/product/detail/" + this.$route.params.id)
      .then(d => {
        this.collList.forEach(v => {
          if (d.data.data.storeInfo.id == v.pid) {
            this.coll = false;
          }
        });
      })
      .catch(msg => {
        console.log(msg);
      });
  },
  methods: {
    // 收藏功能
    collection() {
      if (this.coll == true) {
        this.coll = false;
      } else if (this.coll == false) {
        this.coll = true;
      }

      if (this.coll == false) {
        this.axios({
          method: "post",
          url: "api/collect/add",
          data: {
            category: "product",
            id: this.storeInfo.id
          }
        });
        Toast.success("收藏成功");
      } else {
        this.axios({
          method: "post",
          url: "api/collect/del",
          data: {
            category: "product",
            id: this.storeInfo.id
          }
        });
        Toast.success("取消收藏");
      }
    },

    buy() {
      this.axios({
        method: "post",
        url: "api/cart/add",
        data: {
          productId: this.currentDetail.product_id
            ? this.currentDetail.product_id
            : this.currentDetail.id,
          cartNum: this.stepper,
          new: 0,
          uniqueId: this.currentDetail.unique ? this.currentDetail.unique : ""
        }
      })
        .then(d => {
          if (d.data.status == 200) {
            this.$router.push({
              path: "/order/submit/" + d.data.data.cartId
            });
          } else if (d.data.status == 410000) {
            Toast.fail("因未知原因提交订单失败");
          }
        })
        .catch(msg => {
          console.log(msg);
        });
    },
    showPopup() {
      //加入购物车
      this.show = !this.show;
      // this.cartList = JSON.parse(localStorage.getItem("cartList")) || [];

      if (this.show == false) {
        this.axios({
          method: "post",
          url: "api/cart/add",
          data: {
            productId: this.currentDetail.product_id
              ? this.currentDetail.product_id
              : this.currentDetail.id,
            cartNum: this.stepper,
            new: 0,
            uniqueId: this.currentDetail.unique ? this.currentDetail.unique : ""
          }
        })
          .then(d => {
            console.log(d.data.status);
            console.log(d);
            if (d.data.status == 200) {
              Toast.success("添加成功");
            } else if (d.data.status == 410000) {
              Toast.fail("因未知原因添加失败");
            } else {
              Toast.fail(d.data.msg);
            }
          })
          .catch(msg => {
            console.log(msg);
          });
      }
    },

    // 顶部导航栏函数
    onChange(index) {
      this.current = index;
    },
    share() {
      Dialog.alert({
        message: "分享失败",
        theme: "round-button"
      });
    }
  },
  computed: {
    currentDetail: function() {
      if (this.detail) {
        if (this.detail.productAttr.length > 0) {
          return this.detail.productValue[this.sku.join()];
        } else {
          return this.detail.storeInfo;
        }
      } else {
        return null;
      }
    }
  },

  watch: {
    detail: function(n) {
      this.sku = n.productAttr.map(item => item.attr_values[0]);
    },
    $route: {
      handler(newVal) {
        this.$router.go(newVal.path);
      },
      deep: true
    }
  }
};
</script>

<style lang="less" scoped>
.attr {
  text-align: left;
  padding-left: 10px;
  margin: 10px 0;
  .attr-title {
    margin: 10px 0;
    font-size: 0.3rem;
    font-weight: bold;
  }
  .attr-list {
    display: flex;
    justify-content: flex-start;
    label {
      margin-right: 10px;
      font-size: 0.35rem;
      input {
        width: 0.3rem;
        height: 0.3rem;
        vertical-align: middle;
      }
      span {
        vertical-align: middle;
      }
    }
  }
}
.van-card__price {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    &:first-of-type {
      color: rgb(252, 65, 65);
      font-size: 0.35rem;
      font-weight: bold;
    }
    &:nth-of-type(2) {
      font-size: 0.3rem;
    }
  }
}
.van-card__title {
  text-align: left;
  font-size: 0.35rem;
  font-weight: bolder;
  color: rgb(32, 32, 32);
  margin: 10px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.popupbox {
  overflow: hidden;
}
.van-goods-action {
  z-index: 999999;
}
.number {
  margin-top: 0.5rem;
  .sum {
    text-align: left;
    font-size: 0.4rem;
    padding-left: 20px;
    margin: 5px 0;
  }
}
.product {
  margin-top: 0.5rem;
  .sum {
    text-align: left;
    font-size: 0.4rem;
    padding-left: 20px;
    margin: 5px 0;
  }
}

.van-popup {
  overflow-y: auto;
  padding-bottom: 50px;
}
.top {
  display: flex;
  justify-content: flex-start;
  padding: 10px 20px 0 20px;
  .img {
    width: 3rem;
    height: 3rem;
    margin-right: 20px;
    .van-image {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    flex: 1;
    position: relative;
    p {
      text-align: left;
      font-size: 0.4rem;
      font-weight: 500;
      color: rgb(32, 32, 32);
      margin: 10px 0;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .pri {
      position: absolute;
      bottom: 0.5rem;
      font-size: 0.4rem;
      .money {
        display: inline-block;
        margin-right: 10px;
        font-weight: bold;
        color: rgb(243, 68, 28);
      }
      .num {
        font-size: 0.32rem;
        color: rgb(153, 153, 153);
      }
    }
  }
}

.detail .loading {
  width: 100vw;
  height: 100vh;
  background: rgb(230, 230, 230);
  position: fixed;
  z-index: 1000000;
  line-height: 100vh;
}
.my-swipe .van-swipe__indicators {
  bottom: 0;
}
.my-swipe .van-swipe-item {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: flex-start;
  .gList {
    width: 30%;
    margin: 0.1rem;
    a {
      color: rgb(51, 51, 51);
      font-size: 0.4rem;
      text-decoration: none;
    }
    span {
      display: block;
      text-align: left;
      color: rgb(252, 65, 65);
    }
    p {
      text-align: left;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    .van-image {
      width: 3rem;
      height: 3rem;
    }
  }
}
.nominal {
  margin: 0.3rem 0;
  background: white;
  .title {
    height: 1rem;
    line-height: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(243, 68, 28);
    font-size: 0.4rem;
    span {
      margin: 0 0.2rem;
    }
    i {
      transform: rotate(45deg);
    }
  }
}
.detail {
  background: rgb(245, 245, 245);
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}

.goods {
  .van-image {
    width: 11rem;
    height: 11rem;
  }
  .content {
    width: 100%;
    margin-bottom: 0.3rem;
    background: white;
    margin-top: -3px;
    .num {
      text-align: left;
      margin: 0 0.4rem;
      position: relative;
      .pri {
        color: rgb(252, 65, 65);
        font-size: 0.6rem;
        font-weight: bold;
        margin-right: 0.1rem;
      }
      .vippri {
        color: rgb(51, 51, 51);
        font-size: 0.4rem;
        font-weight: bold;
        margin-right: 0.1rem;
      }
      .vip {
        width: 0.7rem;
        height: auto;
      }
      .share {
        width: 0.5rem;
        height: 0.5rem;
        position: absolute;
        right: 0;
        bottom: 0;
        cursor: pointer;
        img {
          width: 100%;
          height: auto;
        }
      }
    }
    .introduce {
      text-align: left;
      font-size: 0.42rem;
      margin: 0 0.4rem;
      font-weight: bold;
    }
    .label {
      margin: 0.2rem 0.4rem;
      font-size: 0.25rem;
      color: rgb(130, 132, 143);
      display: flex;
      justify-content: space-between;
    }
  }
}

.evaluate {
  margin: 0.3rem 0;
  height: 1rem;
  background: white;
  div {
    margin: 0 0.4rem;
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.3rem;
    a {
      color: #2c3e50;
      text-decoration: none;
    }
    .right {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .red {
        color: rgb(252, 65, 65);
      }
    }
  }
}

.de {
  p {
    height: 1rem;
    background: white;
    line-height: 1rem;
    font-size: 0.4rem;
  }
}
.description {
  width: 100%;
  overflow: hidden;
  text-align: left;
}
</style>
